<!-- 开盘批次 -->
<template>
  <div class='opening_batch'>
    <Row :gutter="16" class="top_warp">
      <Col span='3' class="total_num">已选{{chooseLen}}项</Col>
      <Col span="3" offset="17" class="cityList_moudle_footer">
      <Button class="moudle_cancelButton" @click="deleteSelect"
        :disabled="selectedArray.length==0" v-if="unlocking('0102010202')">删除批次</Button>
      <Button type="primary" @click="editChannel({certType: '1'},'newData')"
        v-if="unlocking('0102010201')">新建批次</Button>
      </Col>
    </Row>
    <Table ref="TableHeight" :max-height="onresizeHeight" @on-selection-change="selectedChange"
      :columns="columns" :data="tableData"></Table>
    <!-- 分页 -->
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount"> 当前第 {{ pageData.current }} 页， 当前第
        {{ (pageData.current - 1) * pageData.rows + 1 }} 条到第
        {{ pageData.current * pageData.rows > pageData.total ? pageData.total : pageData.current * pageData.rows}}
        条， 共 {{ pageData.total }} 条
      </div>
      <Page placement='top' :total="pageData.total" :current="pageData.current"
        :page-size-opts="pageData.pageSizeOpts" @on-change="pageOnChangeFun"
        @on-page-size-change="pageOnPageSizeChangeFun" show-elevator show-sizer show-total />
    </div>
    <!-- 编辑弹窗 -->
    <opening-batchModal ref="openingBatchModal" :housesId='housesId' @saveTableBtn="initData">
    </opening-batchModal>

  </div>
</template>

<script>
  import buildingApi from '@/biz/buildingManagement/openingBatch'
  import openingBatchModal from './components/openingBatchModal.vue'
  import columnsAll from './columns/openingBatchColumns'
  export default {
    components: {
      openingBatchModal,
    },
    data() {
      return {
        housesId: '',
        columns: [],
        tableData: [],
        pageData: {
          total: 0,
          current: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50],
        },
        onresizeHeight: 0,
        chooseLen: 0, //勾选表格数据的数量
        selectedArray: [], //选中表格中的数据
      }
    },
    methods: {
      //时间比较
      compare(firstOpen) {
        if (!firstOpen) return false
        let currentTime = new Date()
        let firstOpenTime = Date.parse(new Date(firstOpen))
        let dateTimes = Date.parse(currentTime)
        console.log(dateTimes, firstOpenTime)
        if (dateTimes > firstOpenTime) return true
      },
      //初始化数据
      initData() {
        this.$nextTick(() => {
          this.onresizeHeight =
            window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 310
        })

        let params = {
          housesId: this.housesId,
          page: this.pageData.current,
          rows: this.pageData.rows,
        }
        buildingApi.batchList(params).then((res) => {
          console.log(res, '获取指定案场所有开盘批次')
          res.list &&
            res.list.map((item) => {
              if (item.isRelation) {
                item._disabled = true
              } else {
                item._disabled = false
              }
            })
          this.tableData = res.list
          this.pageData.total = Number(res.total)
        })
      },
      //查看 编辑 新建
      editChannel(data, type) {
        this.$refs.openingBatchModal.editChannel(data, type)
      },
      //删除
      delChannel(obj) {
        console.log('删除')
        this.$Modal.confirm({
          title: '确认删除批次？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            console.log(
              '确定按钮',
              this.selectedArray.filter((item) => item.batchName)
            )

            let params = {
              batchIds: [obj.batchId],
            }
            buildingApi.batchDel(params).then((res) => {
              this.$Message.success('删除成功')
              this.initData()
            })
          },
        })
      },
      //批量删除
      deleteSelect() {
        console.log(this.selectedArray, '批量删除')
        this.$Modal.confirm({
          title: '确认删除选中批次？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
            console.log(
              '确定按钮',
              this.selectedArray.filter((item) => item.batchName)
            )
            let ids = []
            this.selectedArray.map((item) => {
              ids.push(item.batchId)
            })
            let params = {
              batchIds: ids,
            }
            buildingApi.batchDel(params).then((res) => {
              this.$Message.success('删除成功')
              this.initData()
            })
          },
        })
      },
      //筛选发生变化
      selectedChange(e, M) {
        console.log(e, '筛选')
        this.chooseLen = e.length
        this.selectedArray = e
      },
      //分页触发
      pageOnChangeFun(pages) {
        if (pages != 1 || this.pageData.current != 1) {
          this.pageData.current = pages
          this.initData()
        }
      },
      //分页触发
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows
        this.pageData.current = 1
        this.initData()
      },
    },
    created() {
      this.housesId = JSON.parse(this.$tool.getStorage('caseBuildingId'))
    },
    mounted() {
      this.initData()
      this.columns = columnsAll.ListColumns(this)
      window.onresize = () => {
        return (() => {
          setTimeout(() => {
            if (this.$refs.TableHeight.$el) {
              this.onresizeHeight =
                window.innerHeight - this.$refs.TableHeight.$el.offsetTop - 310
            }
          }, 10)
        })()
      }
    },
  }
</script>
<style lang='scss' scoped>
  .opening_batch {
    .top_warp {
      margin-bottom: 20px;

      .total_num {
        font-size: 18px;
      }
    }
  }

  .cityList_moudle_footer {
    display: flex;
    justify-content: space-around;
  }

  .relation_table {
    margin: 20px 0;
  }
</style>